import React, { useEffect, useState } from 'react';
import { LeftOutlined } from '@ant-design/icons';
import CommonBoard from './CommonBoard';
import MachImgContainer from './MachImgContainer';
import gridBg from '../../../../../public/grid-bg.png';

function MachDetail({ info, onBack }){
    
    return (
        <div style={{ 
            height:'100%', 
            position:'relative',
            backgroundRepeat:'no-repeat', 
            backgroundSize:'cover',
            backgroundImage:`url(${gridBg})`,
            display:'flex',
            alignItems:'center'
        }}>
            <div style={{ position:'absolute', cursor:'pointer', left:'1rem', top:'1rem', zIndex:'10' }} onClick={onBack}>
                <LeftOutlined style={{ color:'#1890ff', fontSize:'1.2rem', fontWeight:'bold', marginRight:'4px' }} />
                <span style={{ color:'#000', fontSize:'1.2rem', fontWeight:'bold' }}>{ info.meterName || '' }</span>
            </div>
            {/* 设备模型图组件 */}
            <MachImgContainer info={info}/>
            {/* 右侧设备面板组件 */}
            <CommonBoard info={info} />
        </div>
    )
}

export default MachDetail;